<script lang="ts" setup>
	//选择收货地址
	import { ref } from "vue";
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		onLoad,
		onReachBottom,
		onUnload
	} from '@dcloudio/uni-app';
	import {
		getCurrentInstance
	} from 'vue'
	import {
		userStore
	} from '@/pinia';
	let router = useRouter()
	const userStoreInfo = userStore();
	const {
		proxy,
	} = getCurrentInstance()
	let addressArr = ref([])
	const routerLink = (e) => {
		//注册全局事件，添加完后刷新列表
		uni.$on('updataAddress', (data) => {
			pageNum.value = 1
			addressArr.value = []
			getList()
			uni.$off('updataAddress')
		})
		router.push({
			name: e,
			params: {}
		})
	}
	let pageNum = ref(1)
	onReachBottom(() => {
		pageNum.value++
		getList()
	})
	onUnload(() => {
		uni.$off('updataAddress')
	})
	const getList = () => {
		//获取地址列表
		proxy.$req('GET', proxy.$api.shouhuodizhi, {
			memberId: userStoreInfo.userInfo.id,
			pageNo: pageNum.value,
			pageSize: 20
		}).then((res) => {
			console.log(res);
			addressArr.value = addressArr.value.concat(res.result.records)
		})
	}
	getList()
	const radioChange = (evt) => {
		console.log(evt);

	}
	const back = (e) => {
		uni.$emit('choseAddress', {
			address: e
		})
		uni.$emit('choseAddressGys', {
			address: e
		})
		router.back()
	}
</script>
<template>
	<view class="box">
		<radio-group @change="radioChange">
			<label class="addressBox" v-for="(item, index) in addressArr" :key="index" @click="back(item)">
				<view class="radio">
					<!-- <radio color="#CB645E" :value="item.id" /> -->
					<u-icon name="map-fill" size="20" color="#CB645E"></u-icon>
				</view>
				<view class="detail">
					<text class="detailText" style="font-size: 26rpx;">{{ item.province }} {{ item.city }}
						{{ item.district }}{{ item.detail }}</text>
					<view class="ab1">
						<!-- <view class="" @click="routerLink('editAddress')">
								<u-icon name="checkbox-mark" size="20"></u-icon>
							</view> -->
						<view class="ab11">
							<text class="abName">{{ item.realName }}</text>
							<text class="abPhone" style="margin: 0 15rpx;">{{ item.phone }}</text>
						</view>
					</view>
				</view>
			</label>
		</radio-group>
	</view>


	<!-- 	<view class="addressBox" v-for="(item,index) in arr" :key="index">
		<text class="u-line-2" style="font-size: 26rpx;">{{ item.detail }}</text>
		<view class="ab1">
			<view class="" @click="routerLink('editAddress')">
				<u-icon name="checkbox-mark" size="20"></u-icon>
			</view>
			<view class="ab11">
				<text>{{ item.name }}</text>
				<text style="margin: 0 15rpx;">{{ item.phone }}</text>
			</view>
		</view>
		
	</view> -->
	<view class="addBox">
		<view class="addAddress" @click="routerLink('addMineAddress')">
			添加新地址
		</view>
	</view>

</template>
<style lang="scss">
	page {
		background: #FAFAFA;
	}

	.box {
		width: 686rpx;
		margin: auto;
	}

	.addBox {
		width: 750rpx;
		height: 164rpx;
		background: #FFFFFF;
		box-shadow: inset 0rpx 2rpx 0rpx 0rpx rgba(0, 0, 0, 0.05);
		position: fixed;
		bottom: 0;
		padding: 30rpx;
		box-sizing: border-box;

		.addAddress {
			width: 686rpx;
			height: 88rpx;
			background: #CB645E;
			border-radius: 16rpx;
			line-height: 88rpx;
			text-align: center;
			margin: auto;
			color: white;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	.addressBox {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 686rpx;
		height: 200rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		margin-top: 30rpx;
		padding: 32rpx;
		box-sizing: border-box;

		.detailText {
			font-size: 32rpx;
			font-weight: 600;
			color: rgba(0, 0, 0, 0.85);
			line-height: 40rpx;
		}

		.detail {
			width: 534rpx;
		}

		.radio {
			width: 50rpx;
			margin-right: 16rpx;
		}

		.ab1 {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.ab11 {
				text:nth-child(3) {
					font-size: 26rpx;
					padding: 2rpx 20rpx;
					background-color: #000;
					color: #fff;
					border-radius: 10rpx;
				}

				.abName {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.65);
					line-height: 40rpx;
				}

				.abPhone {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.45);
					line-height: 40rpx;
				}

			}
		}
	}
</style>